<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>下单中心</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/css/cart.css" />
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
	</head>

	<body>
		<div id="header">
			<h1>下单中心</h1>
			<span class="backicon"></span>
		</div>
		<div class="body">
			<div class="order">
				<div class="check">
					<div class="choice" data="0"></div>
				</div>
				<img src="style/img/product_3.png" class="pro_pic">
				<div class="content">
					<span class="name">电话医生卡</span>
					<span class="size">积分：<em class="pri">300</em></span>
					<div class="count">
						<span class="min">-</span>
						<input class="num" value="1">
						<span class="plus">+</span>
					</div>
				</div>
				<div class="priceinfo">
					<img src="style/img/del.png" class="del">
				</div>
			</div>

			<div class="order">
				<div class="check">
					<div class="choice" data="0"></div>
				</div>
				<img src="style/img/product_1.png" class="pro_pic">
				<div class="content">
					<span class="name">车载吸尘器</span>
					<span class="size">积分：<em class="pri">300</em></span>
					<div class="count">
						<span class="min">-</span>
						<input class="num" value="1">
						<span class="plus">+</span>
					</div>
				</div>
				<div class="priceinfo">
					<img src="style/img/del.png" class="del">
				</div>
			</div>
		</div>
		
		
		<div class="exchange maxwidth">
			<a href="javascript:void(0);" class="shopping_cart">
				<span class="check" id="allchoice" data="0"></span> 全选

			</a>
			<a href="javascript:void(0);" class="total_intergral">合计：<em class="score total">300</em>积分</a>
			<a href="settlement .html" class="exchange_btn">立即兑换</a>
		</div>

	</body>
	<script type="text/javascript">
		$(function() {
			totalprice();

			$(".min").click(function() {
				var minnum = $(this).next().val()
				minnum--
				console.log($(this).next().val())
				if($(this).next().val() == 1) {
					$(this).next().val() == 1
					return;
				}
				$(this).next().val(minnum)
				var attrdate = $(".choice").attr("data");
				if(attrdate == 1) {
					totalprice();
				}

			})

			$(".plus").click(function() {
				var plusnum = $(this).prev().val();
				plusnum++;
				$(this).prev().val(plusnum)

				totalprice();
			})
			$(".del").click(function() {
				$(this).parent().parent().remove();
				totalprice();
			})

			$(".choice").click(function() {
				var attrdata = $(this).attr("data");
				if(attrdata == 0) {
					$(this).css("background-image", "url(style/img/checkbox_checked.png)")
					$(this).attr("data", 1)
				} else {
					$(this).css("background-image", "url(style/img/checkbox_no.png)")
					$(this).attr("data", 0)
					$("#allchoice").css("background-image", "url(style/img/checkbox_no.png)")
					$("#allchoice").attr("data", 0)
				}

				totalprice();
			})
			$("#allchoice").click(function() {
				var attrdata = $(this).attr("data");
				if(attrdata == 0) {
					$(".choice").attr("data", 1);
					$(this).css("background-image", "url(style/img/checkbox_checked.png)");
					$(".choice").css("background-image", "url(style/img/checkbox_checked.png)");
					$(this).attr("data", 1);
				} else {
					$(".choice").attr("data", 0);
					$(this).css("background-image", "url(style/img/checkbox_no.png)");
					$(".choice").css("background-image", "url(style/img/checkbox_no.png)");
					$(this).attr("data", 0);
				}

				totalprice();
			})

			function totalprice() {
				var num = 0;
				var conut = 0;
				$(".choice").each(function() {
					if($(this).attr("data") == 1) {
						var valnum = $(this).parent().next().next().find(".num").val();
						var prices = $(this).parent().next().next().find(".pri").text();
						conut += parseInt(valnum);
						num += valnum * prices;
					}
				})
				$('.total').html(num);
			}

		})
	</script>

</html>